<template>
    <!-- #ifdef H5 -->
    <td class="uni-table-td" :rowspan="rowspan" :colspan="colspan" :class="{'table--border':border}"
        :style="{width:width + 'px','text-align':align}">
        <slot></slot>
    </td>
    <!-- #endif -->
    <!-- #ifndef H5 -->
    <!-- :class="{'table--border':border}"  -->
    <view class="uni-table-td" :class="{'table--border':border}" :style="{width:width + 'px','text-align':align}">
        <slot></slot>
    </view>
    <!-- #endif -->

</template>

<script>
    /**
     * Td 单元格
     * @description 表格中的标准单元格组件
     * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
     * @property {Number}    align = [left|center|right]    单元格对齐方式
     */
    export default {
        name: 'uniTd',
        options: {
            virtualHost: true
        },
        props: {
            width: {
                type: [String, Number],
                default: ''
            },
            align: {
                type: String,
                default: 'left'
            },
            rowspan: {
                type: [Number, String],
                default: 1
            },
            colspan: {
                type: [Number, String],
                default: 1
            }
        },
        data() {
            return {
                border: false
            };
        },
        created() {
            this.root = this.getTable()
            this.border = this.root.border
        },
        methods: {
            /**
             * 获取父元素实例
             */
            getTable() {
                let parent = this.$parent;
                let parentName = parent.$options.name;
                while (parentName !== 'uniTable') {
                    parent = parent.$parent;
                    if (!parent) return false;
                    parentName = parent.$options.name;
                }
                return parent;
            },
        }
    }
</script>

<style lang="scss">
    $border-color: #EBEEF5;

    .uni-table-td {
        display: table-cell;
        padding: 8px 10px;
        font-size: 14px;
        border-bottom: 1px $border-color solid;
        font-weight: 400;
        color: #606266;
        line-height: 23px;
        box-sizing: border-box;
    }

    .table--border {
        border-right: 1px $border-color solid;
    }
</style>
